<template>
    <div class="special-reward-form">
        <div class="header-actions">
            <router-link to="/main/renshi/yuangongdangan/yuangongguanli/yuangongguanli">返回</router-link>
            <span>
                <span @click="printForm" style="color: #5541b9;cursor:pointer;">打印</span>&emsp;
                <router-link to="/main/renshi/kaoqing/jiangchen/zhaunxiangjlsqd-list">列表</router-link>
            </span>
        </div>
        <div class="main-form">
            <h2 class="form-title">专项奖励申请单</h2>
            <table class="form-table" border="1">
                <tbody>
                    <tr>
                        <td>工号</td>
                        <td><input v-model="formData.employeeId" /></td>
                        <td>姓名</td>
                        <td><input v-model="formData.name" /></td>
                        <td>部门名称</td>
                        <td><input v-model="formData.departmentName" /></td>
                        <td>性别</td>
                        <td><input v-model="formData.gender" /></td>

                    </tr>
                    <tr>
                        <td>职务</td>
                        <td><input v-model="formData.position" /></td>
                        <td>入职日期</td>
                        <td colspan="2"><input style="width: 150px;" v-model="formData.entryDate" type="date" /></td>
                        <td>填表日期</td>
                        <td colspan="2"><input style="width: 150px;" v-model="formData.fillDate" type="date" /></td>
                    </tr>
                    <tr>
                        <td colspan="2">奖励事由：</td>
                        <td colspan="13"><textarea v-model="formData.reason" class="textkuang"></textarea></td>
                    </tr>
                    <tr>
                        <td colspan="2" rowspan="2">奖励金额：</td>
                        <td colspan="13">
                            小写：<input v-model.number="formData.rewardAmountSmall" style="width: 150px;" type="number"
                                step="0.01" @input="convertToCapital" />
                        </td>
                    </tr>
                    <tr>
                        <td colspan="13">
                            大写：<input v-model.number="formData.rewardAmountCapital" readonly />
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">部门经理意见：</td>
                        <td colspan="13">
                            <textarea v-model="formData.managerOpinion" class="textkuang"></textarea><br>
                            部门经理：<input style="width: 150px;margin-right: 60px;" v-model="formData.managerSignature" />
                            <input v-model="formData.managerYear" type="number" />
                            月 <input v-model="formData.managerMonth" type="number" /> 日
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">部门批示：</td>
                        <td colspan="13">
                            <textarea v-model="formData.departmentOpinion" class="textkuang"></textarea><br>
                            部长/总监：<input style="width: 150px;margin-right: 60px;"
                                v-model="formData.departmentSignature" />
                            <input v-model="formData.departmentYear" type="number" />
                            月 <input v-model="formData.departmentMonth" type="number" /> 日
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">总经理意见：</td>
                        <td colspan="13">
                            <textarea v-model="formData.generalManagerOpinion" class="textkuang"></textarea><br>
                            总经理：<input style="width: 150px;margin-right: 60px;"
                                v-model="formData.generalManagerSignature" />
                            <input v-model="formData.generalManagerYear" type="number" />
                            月 <input v-model="formData.generalManagerMonth" type="number" /> 日
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">企业管理部意见：</td>
                        <td colspan="13">
                            <textarea v-model="formData.enterpriseManagementOpinion" class="textkuang"></textarea><br>
                            部长：<input style="width: 150px;margin-right: 60px;"
                                v-model="formData.enterpriseManagementSignature" />
                            <input v-model="formData.enterpriseManagementYear" type="number" />
                            月 <input v-model="formData.enterpriseManagementMonth" type="number" /> 日
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">总裁/董事长意见：</td>
                        <td colspan="14">
                            <textarea v-model="formData.presidentOpinion" class="textkuang"></textarea><br>
                            总裁/董事长批准：<input style="width: 150px;margin-right: 60px;"
                                v-model="formData.presidentSignature" />
                            <input v-model="formData.presidentYear" type="number" />
                            月 <input v-model="formData.presidentMonth" type="number" /> 日
                        </td>
                    </tr>
                    <tr>
                        <td colspan="14">
                            人资填写奖励生效月份：
                           <input v-model="formData.effectiveYear" type="number" /> 年 
                           <input v-model="formData.effectiveMonth" type="number" /> 月 
                        </td>
                    </tr>
                </tbody>
            </table>
            <button @click="saveData" class="save-button">保存</button>
            <p class="form-info"><span>表单编号及版本：AM-JY-021 A/1 </span><span>保存期限：长期</span></p>
        </div>
    </div>
</template>

<script>
import { saveSpecialRewardApply } from '@/api/specialRewardApply';

export default {
    data() {
        return {
            formData: {
                employeeId: '',
                name: '',
                departmentName: '',
                gender: '',
                position: '',
                entryDate: '',
                fillDate: new Date().toISOString().split('T')[0],
                reason: '',
                rewardAmountSmall: '',
                rewardAmountCapital: '',
                managerOpinion: '',
                managerSignature: '',
                managerYear: '',
                managerMonth: '',
                departmentOpinion: '',
                departmentSignature: '',
                departmentYear: '',
                departmentMonth: '',
                generalManagerOpinion: '',
                generalManagerSignature: '',
                generalManagerYear: '',
                generalManagerMonth: '',
                enterpriseManagementOpinion: '',
                enterpriseManagementSignature: '',
                enterpriseManagementYear: '',
                enterpriseManagementMonth: '',
                presidentOpinion: '',
                presidentSignature: '',
                presidentYear: '',
                presidentMonth: '',
                effectiveYear: '',
                effectiveMonth: '', rewardAmountSmall: '',
                rewardAmountCapital: ''
            }
        };
    },
    methods: {
        async saveData() {
            try {
                // 验证必填字段
                if (!this.formData.employeeId) {
                    throw new Error('请填写工号');
                }
                if (!this.formData.name) {
                    throw new Error('请填写姓名');
                }
                if (!this.formData.departmentName) {
                    throw new Error('请填写部门名称');
                }
                if (!this.formData.reason) {
                    throw new Error('请填写奖励事由');
                }
                if (!this.formData.rewardAmountSmall) {
                    throw new Error('请填写奖励金额');
                }

                await saveSpecialRewardApply(this.formData);
                this.$message.success('保存成功');
                this.$router.push('/main/renshi/kaoqing/jiangchen/zhaunxiangjlsqd-list');
            } catch (error) {
                this.$message.error('保存失败：' + error.message);
            }
        },
        printForm() {
            window.print()
        },
        convertToCapital() {
            this.formData.rewardAmountCapital = this.numberToChinese(this.formData.rewardAmountSmall);
        },
        numberToChinese(num) {
            const fraction = ['角', '分'];
            const digit = ['零', '壹', '贰', '叁', '肆', '伍', '陆', '柒', '捌', '玖'];
            const unit = [['元', '万', '亿'], ['', '拾', '佰', '仟']];
            let head = num < 0 ? '负' : '';
            num = Math.abs(num);

            let s = '';

            for (let i = 0; i < fraction.length; i++) {
                s += (digit[Math.floor(num * 10 * Math.pow(10, i)) % 10] + fraction[i]).replace(/零./, '');
            }
            s = s || '整';
            num = Math.floor(num);

            for (let i = 0; i < unit[0].length && num > 0; i++) {
                let p = '';
                for (let j = 0; j < unit[1].length && num > 0; j++) {
                    p = digit[num % 10] + unit[1][j] + p;
                    num = Math.floor(num / 10);
                }
                s = p.replace(/(零.)*零$/, '') + unit[0][i] + s;
            }

            return head + s.replace(/(零.)*零元/, '元').replace(/(零.)+/g, '零').replace(/^整$/, '零元整');
        }
    }
};
</script>

<style scoped lang="scss">
.special-reward-form {
    font-family: '宋体', sans-serif;
    padding: 20px;
    // background-color: #f9f9f9;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.header-actions {
    width: 1200px;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    padding: 10px;
    gap: 20px;
    margin-bottom: 20px;
}

.main-form {
    width: 1200px;
    max-width: 1200px;
    margin: 0 auto;
}

.form-title {
    text-align: center;
    color: #333;
    margin-bottom: 20px;
}

.form-table {
    border-collapse: collapse;
    width: 100%;
    margin-bottom: 20px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

th,
td {
    border: 1px solid #ddd;
    padding: 12px;
    text-align: center;
}

th {
    background-color: #f2f2f2;
}

.textkuang {
    width: 90%;
    background-color: #f9f9f9;
    outline: none;
    font-family: '宋体';
    border: 1px solid #ddd;
    resize: vertical;
    border-radius: 4px;
    padding: 8px;
}

input {
    width: 80%;
    outline: none;
    border: 0px solid #ddd;
    border-radius: 4px;
    padding: 3px;
}

input[type="date"] {
    width: 50%;
}

input[type="number"] {
    width: 50px;
}

.save-button {
    display: block;
    width: 100%;
    padding: 10px;
    background-color: #409eff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.save-button:hover {
    background-color: #3a8ee6;
}

.form-info {
    color: #666;
    margin-top: 20px;
    text-align: center;
    display: flex;
    justify-content: space-between;
}

@media print {

    /*@page规则被用来设置打印页面的方向为横向*/
    // @page {
    //     size: landscape;
    // }

    .special-reward-form {
        font-size: 1.2em;
        padding: 20px 10px 20px 1px;
        margin-right: 5px;
        box-shadow: 0 0px 0px rgba(255, 255, 255, 0) !important;
    }

    .main-form {
    width: 1000px;
    max-width: 1000px;
    margin: 0 auto;
}
    .header-actions {
        display: none;
    }

    .save-button {
        // padding: 0px;
        display: none;
        // width: 750px;
    }

    .page-header {
        .header-actions {
            display: none;
        }
    }

    .main-form {
        box-shadow: none;
        padding: 10px;
    }

    table {
        margin: 10px 0px;
    }

    .info-table,
    .content-table,
    .approval-table {
        border: 1px solid #000;

        td,
        th {
            border: 1px solid #000;
        }
    }

    td,
    th {
        padding: 5px;
        border: 1px solid #000;
        white-space: nowrap;
    }

    input {
        border: none !important;
        background-color: transparent !important;
        text-align: center;
    }

    textarea {
        border: 0px !important;
        resize: none !important;
    }
}
</style>